<template>
	<view class="buy-info-box">
		<uni-nav-bar background-color="#fff" color="#000" :status-bar="true" title="采购" fixed>
			<view slot="left">
				<view class="navWp">
					<view class="back" @click="goBack">
						<u-icon name="arrow-left" color="#000000" size="50"></u-icon>
					</view>
				</view>
			</view>
		</uni-nav-bar>
		<view class="swiper-top" v-if="infoObj.fileList.length">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in infoObj.fileList" :key="index">
					<view class="swiper-item uni-bg-red">
						<u-image :src="item" width="100%" height="750rpx" :lazy-load="true" mode="aspectFill"></u-image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="top">
			<view class="title">
				{{infoObj.name}}
			</view>
			<view class="num">
				{{infoObj.buyNum}} {{infoObj.specs||'件'}}
			</view>
			<view class="perfile">
				{{infoObj.perfile}}
			</view>
		</view>
		<view class="middle">
			<view class="title">
				发布人信息
			</view>
			<view class="infoBox">
				<view class="item">
					<text class="label">姓名：</text>
					{{infoObj.userName}}
				</view>
				<view class="item">
					<text class="label">职位：</text>
					{{infoObj.userPosition}}
				</view>
				<view class="item">
					<text class="label">所在地区：</text>
					{{infoObj.city}}
				</view>
			</view>
		</view>
		<view class="btm">
			<view class="title">
				报名信息
			</view>
			<view class="infoBox">
				<view class="item">
					<text class="label">开始时间：</text>
					{{infoObj.createTime}}
				</view>
				<view class="item">
					<text class="label">结束时间：</text>
					{{infoObj.endTime==null?'长期采购':infoObj.endTime}}
				</view>
			</view>
		</view>
		<view class="phone-box">
			<u-button type="primary" color="#015eea" text="立即联系" @click="handleCall()">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoId: '',
				infoObj: {
					name: '',
					buyNum: '',
					perfile: '',
					userName: '',
					userPosition: '',
					city: '',
					createTime: '',
					endTime: '',
					fileList: [],
				},
			};
		},
		onLoad(option) {
			if (option.id) {
				this.infoId = option.id
				this.queryListById()
			}
		},
		methods: {
			goBack() {
				uni.setStorageSync(`supplyJumpTo`, 1)
				const pageNum = getCurrentPages()
				if (pageNum.length > 1) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/card/card'
					})
				}
			},
			parseString(str) {
				// 一个 flag 标识当前的对应结束点
				let right = null;
				let parent = null;

				let key = '';
				let value = '';

				for (let i = 0; i < str.length; i++) {
					const letter = str[i];

					if (letter === '[') {
						// 这里是一个“高街元素”，做好笔记！
						// 小老虎这里巧妙地将相对应右括号记录下来，
						// 这样在下面判断结束的时候就会变得相当便捷。
						right = ']';
						parent = new Array();
					} else if (letter === ']') {
						if (right === letter && value) {
							parent.push(value);
							value = '';
							right = null;
						}
					} else if (letter === ',') {
						if (right === ']') {
							parent.push(value);
							value = '';
						}
					} else {
						// non empty
						if (letter && letter !== ' ') {
							value += letter;
						}
					}
				}
				return parent;
			},
			// 根据id获取详情列表
			queryListById() {
				this.$api.queryMyCouponListsById(this.infoId).then(res => {
					if (res.success) {
						// res.result.fileList=this.parseString(res.result.fileList)
						res.result.fileList = res.result.fileList ? res.result.fileList.split(",") : []
						this.infoObj = res.result
						this.infoObj.createTime = res.result.createTime.split(" ")[0]
						// this.avatarList = res.result.qzActivitySignVOList
					}
				})
			},
			//打电话
			handleCall() {
				let phoneNumber = String(this.infoObj.userTel)
				try {
					uni.makePhoneCall({
						phoneNumber
					});
				} catch (e) {
					uni.showToast({
						title: "电话号码有误"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.buy-info-box {
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

		.swiper-top {
			.swiper {
				height: 100vw;

				.swiper-item {
					text-align: center;
				}

			}
		}

	}

	.top,
	.middle,
	.btm {
		font-size: 28rpx;
		font-weight: 400;
		color: #1D2129;
		line-height: 39rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		margin-bottom: 24rpx;

		.title,
		.num {
			line-height: 45rpx;
			font-size: 32rpx;
			font-weight: 600;
		}

		.num {
			color: #FF7D00;
			margin: 20rpx 0;
		}

		.infoBox {
			margin-top: 32rpx;

			.item {
				margin-bottom: 24rpx;

				&:last-of-type {
					margin-bottom: 0;
				}


				.label {
					color: #4E5969;
					min-width: 146rpx;
					display: inline-block;
				}

			}
		}
	}

	.phone-box {
		position: fixed;
		width: 100%;
		padding: 16rpx 48rpx calc(10rpx + env(safe-area-inset-bottom));
		bottom: 0;
		box-sizing: border-box;
		background-color: #fff;
	}
</style>